<template>
	<view class="uni-flex uni-column list">
		<view class="uni-flex list-cell" v-for="(item, index) in reports" :key="index">
			<navigator :url="'view?id='+item.id" hover-class="navigator-hover">
			<view class="uni-column list-cell-body">
				<view class="body-title">
					<view style="font-size:16px;">{{ item.title }}</view>
				</view>
				<view class="uni-flex body-footer">
					<view>{{ item.sub_title }}</view>
				</view>
			</view>
			</navigator>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>

	</view>
</template>

<script>
	import * as API from 'server/getData'

	export default {
		data() {
			return {
				title: 'title',
				page: 0,
				reports: [],
				loadMoreText: "加载中...",
				showLoadMore: false
			}
		},
		onLoad() {
			this.initData()
		},
		onPullDownRefresh () {
			this.initData()
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.initData(false)
		},
		methods: {
			initData(pull=true) {
				this.page = !pull ? this.page + 1 : 1
				API.articles.fetchReports({page: this.page}).then(r => {
					if (r.success === true) {
						if (r.data.items.length === 0) {
							this.loadMoreText = '已经没有了'
						}
						this.reports = pull ? r.data.items : this.reports.concat(r.data.items)
					}
					uni.stopPullDownRefresh()
				})
			}
		}
	}
</script>

<style>
page {
	height: auto;
	min-height: 100%;
}
.list {}
.list-cell{padding:11px 15px;background:#fff;border-bottom:1px solid #eee;}
.list-cell .list-cell-image image{width:150upx; height:120upx}
.list-cell .list-cell-body{flex:1;justify-content:space-around;}
.body-title{line-height: 18px;height:37px;}
.body-footer{color: #8f8f94;justify-content: space-between;}
</style>
